const mta = require('../../../mta_sdk/mta_analysis.js');
var ctx = null;
const app = getApp();
var pid="";
var pic='';
var x= 100;
var y= 100;
var w ='';
var h ='';
var head_w = '';
var head_h ='';
var hlj_w ='';
var hlj_h ='';
var cw = '';
var lastx='';
var lasty='';
var lastw = '';
var lasth = '';
var l = '';
var t = '';
Page({

  data: {
    shared: 0,
    wxCanvas: null,
    img1:'',
    img2:'',
    shareImg: '',
    saved:false,
    ajaxSuccess:false
  },

  onLoad: function (opt) {
    mta.Page.init();
    console.log(opt);
    if (opt.shared == 1) {
      this.setData({
        shared: 1,
        shareImg: opt.shareImg,
        saved:true,
        ajaxSuccess: true
      });

    }
    if (opt.pic) {
      ctx = wx.createCanvasContext("mycanvas");
      this.makeImg(opt.pic,'/images/icon_hlj.png')
      pid = opt.pid;
      pic = opt.pic;
     
    }
    if(opt.lastw){
      lastx = parseInt(opt.lastx);
      lasty = parseInt(opt.lasty);
      lastw = parseInt(opt.lastw);
      lasth = parseInt(opt.lasth);
    }
    
  },

  makeImg(pic,icon) {
    wx.showLoading({
      title: '加载中...',
    });
    var me = this;
    
    var sysInfo = wx.getSystemInfoSync();
    var ft = sysInfo.windowWidth * .06;
    var query = wx.createSelectorQuery();
    

    if (me.data.shared == 1) {
      wx.hideLoading();
      return false;
    }
    query.select('#canvas').boundingClientRect();//获取canvas的元素信息
    query.select('#headstyle').boundingClientRect();//获取canvas的元素信息
    query.select('#hlj').boundingClientRect();//获取canvas的元素信息
    query.exec(res => {
       w = res[0].width;
       h = res[0].height;
       cw = res[1].width;
       hlj_w = res[2].width;
       hlj_h = res[2].height;
       l = (w - hlj_w) / 2;
       t = (h - hlj_h) / 1.4

       wx.getImageInfo({
            src: pic,
            success: img1 => {
              console.log(l,t, hlj_w, hlj_h)
              wx.setStorageSync('img1', img1.path);
              wx.setStorageSync('img2', icon)
              
              var shared = this.data.shared
              this.drawPic(shared == 0 ? l : lastx, shared == 0 ? t : lasty, shared == 0 ? hlj_w : lastw, shared == 0 ? hlj_h : lasth);

            wx.hideLoading();
            
            
            }
          })

    })
  },
  saveNew(){
    var me=this;
    wx.showLoading({
      title: '加载中',
    });
      app.buldingImg("mycanvas", callBack => {

        me.setData({
          shareImg: callBack.data.url,
          saved:true
        });
        wx.hideLoading();
      });

  },
  drawPic(iconx,icony,iconw,iconh){
    
    ctx.clearRect(0, 0, w, h);
    ctx.save();
    ctx.beginPath();
    ctx.arc(w / 2, h / 3, cw / 2, 0, Math.PI * 2, false);
    //ctx.fillStyle="yellow";
    //ctx.fill();
    ctx.clip();
    ctx.drawImage(wx.getStorageSync("img1"), (w - cw) / 2, (h - cw) / 6.5, cw, cw);
    ctx.restore();
    ctx.drawImage(wx.getStorageSync("img2"), iconx, icony, iconw, iconh);
    ctx.draw();
  },
  start(){

  },
  move(e) {
    if(this.data.shared==1){
      return false;
    }
    x = e.touches[0].x;
    y = e.touches[0].y;
    lastx = x - (hlj_w / 2);
    lasty = y - (hlj_h / 2);
    this.drawPic(lastx, lasty, lastw == '' ? hlj_w : lastw, lasth == '' ? hlj_h : lasth);
  },
  end(e){
   
  },

  scales(e){
    var val=e.detail.value*0.5;
    lastw=hlj_w * val;
    lasth = (hlj_w * val) * 1.75;
    this.drawPic(lastx == '' ? l : lastx, lasty == '' ? t : lasty, lastw, lasth);
  },

  //保存图片
  saveImg() {
    app.savePic("mycanvas");
  },
  onShareAppMessage: function () {
    if(!this.data.saved){
      this.saveNew();
    }
    return {
      title: '戴红领巾',
      desc: '戴红领巾',
      path: `/pages/${pid}/${pid}_detail/${pid}_detail?shared=1&shareImg=${this.data.shareImg}`,
      imageUrl: this.data.shareImg
    }
  },
  toPlay() {
    wx.navigateTo({
      url: `/pages/${pid}/${pid}_make/${pid}_make?pid=${pid}`,
    })
  },

  toHome() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  onUnload() {
    wx.removeStorageSync("coverpic")
  },
})